<template>
  <div>
    <van-tabs color="#F44C58" v-if="userinfo" shrink v-model:active="tabActive">
      <van-tab title="全部"></van-tab>
      <van-tab title="我的"></van-tab>
    </van-tabs>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          class="p-1 border-b-4"
          @click="handleNavTo(item)"
        >
          <div class="flex justify-between">
            <div class="flex">
              <div class="text-[0.5rem] mr-1 content">
                {{ item.title }}
              </div>
            </div>
            <div class="text-sm" style="color: #909399">
              {{ item.time }}
            </div>
          </div>
          <div class="flex items-center justify-between mb-1 mt-1">
            <div class="flex items-center">
              <div class="relative">
                <!-- <img
                  v-if="item.user.gender == '0'"
                  src="@/assets/images/nv.png"
                  class="w-1.5 h-1.5 absolute top-[-2px] right-0.5"
                  alt=""
                />
                <img
                  v-if="item.user.gender == '1'"
                  src="@/assets/images/nan.png"
                  class="w-1.5 h-1.5 absolute top-[-2px] right-0.5"
                  alt=""
                /> -->
                <img
                  class="w-2 h-2 rounded-full mr-0.5"
                  :src="item.user.avatarUrl"
                  alt=""
                />
              </div>
              <div class="flex items-center">
                <div class="text-zinc-500 text-sm">
                  {{ item.user.nickName }}
                </div>
              </div>
              <div
                v-if="item.user.occupation"
                class="h-[5px] w-[5px] rounded-[999px] bg-zinc-300 ml-1 mr-1"
              ></div>
              <div v-if="item.user.occupation" class="text-zinc-400 text-sm">
                {{ item.user.occupation }}
              </div>
              <x-svg-icon
                v-if="item.user.vip"
                class="w-2 h-2 ml-0.5"
                name="vip1"
              ></x-svg-icon>
            </div>
            <div class="text-zinc-400 text-sm">
              {{ moment(item.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
            </div>
          </div>
          <div v-if="item.content" class="text-sm content text-zinc-400 mb-1">
            <!-- {{ contetns(item.content) }} -->
            {{ item.content }}
          </div>

          <div v-if="item.imgs" class="flex items-center">
            <div v-for="(url, i) in imgs(item)" :key="i">
              <div class="xl:w-16 xl:h-16 w-8 h-8 mr-1">
                <van-image fit="cover" width="100%" height="100%" :src="url" />
              </div>
            </div>
          </div>
          <div class="flex mt-1 tags" v-if="item.tags">
            <div
              class="
                mr-1
                text-sm
                tag-item
                h-2.5
                pl-1
                pr-1
                rounded-[999px]
                flex
                items-center
              "
              v-for="(t, i) in tag(item.tags)"
              :key="i"
            >
              #{{ t }}
            </div>
          </div>
          <div class="mt-1 flex items-center">
            <div class="text-sm text-zinc-400">{{ item.likeCount }} 点赞</div>
            <div
              class="w-0.5 h-0.5 rounded-[100%] bg-slate-400 ml-0.5 mr-0.5"
            ></div>
            <div class="text-sm text-zinc-400">
              {{ item.totalComment }} 评论
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { Dialog } from "vant";
import "vant/es/Dialog/style";
import { getPosts } from "@/api/posts.js";
import { computed, ref, watch } from "vue";
import moment from "moment";
import router from "@/router";
import { useStore } from "vuex";
const store = useStore();
const user = localStorage.getItem("userinfo");
const userinfo = user ? JSON.parse(user) : "";
const tabActive = ref(0);
watch(
  () => store.getters.searchText,
  (title) => {
    // 重置请求参数
    if (userinfo) {
      searchQuery({ title, userid: tabActive.value === 1 ? userinfo.id : "" });
    } else {
      searchQuery({ title });
    }
  }
);
watch(
  () => tabActive.value,
  (val) => {
    if (userinfo && val === 1) {
      searchQuery({ title: store.getters.searchText, userid: userinfo.id });
    } else {
      searchQuery({ title: store.getters.searchText, userid: "" });
    }
    // 重置请求参数
  }
);
const contetns = computed(() => {
  return function (contetn) {
    return contetn.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "");
  };
});
//重置
const searchQuery = (data) => {
  params.value = {
    pageIndex: 0,
    pageSize: 10,
    ...data,
  };
  loading.value = false;
  refreshing.value = false;
  finished.value = false;
  list.value = [];
  getPostList();
};
const active = ref(0);

const imgs = computed(() => {
  return function (item) {
    return item.imgs.split(",").splice(0, 4);
  };
});
const handleNavTo = (item) => {
  router.push({
    path: "/details",
    query: {
      id: item.id,
    },
  });
};
const params = ref({
  pageIndex: 0,
  pageSize: 10,
  title: "",
});
const getPostList = () => {
  if (refreshing.value) {
    list.value = [];
    params.value.pageIndex = 0;
    refreshing.value = false;
  }
  if (finished.value) {
    return;
  }

  loading.value = true;
  params.value.pageIndex++;
  getPosts({
    ...params.value,
  }).then((res) => {
    const { postsList, count } = res;
    list.value = list.value.concat(postsList);
    loading.value = false;
    if (list.value.length >= count) {
      finished.value = true;
    }
  });
};
const tag = computed(() => {
  return function (item) {
    return item.split(",");
  };
});

const list = ref([]);
const loading = ref(false);
const refreshing = ref(false);
const finished = ref(false);
const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
const onLoad = () => {
  getPostList();
};
</script>

<style lang="scss" scoped>
.tags {
  .tag-item {
    background-color: #ecf5ff;
    color: #409eff;
  }
}
.content {
  word-break: break-all;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}
</style>